<template>
  <div>
    <myhread2></myhread2>
    <myhread></myhread>
    <div class="video-tlt">
      <ul>
        <li><router-link to="tuijian">推荐</router-link></li>
        <li><router-link to="jiedu">热片解读</router-link></li>
        <li><router-link to="yugao">预告片</router-link></li>
        <li><router-link to="shuody">说电影</router-link></li>
        <li><router-link to="jiapian">佳片</router-link></li>
        <li><router-link to="juzong">剧综</router-link></li>
      </ul>
    </div>
     <div class="video-cont">
      <div class="cont-list" v-for="item in video" :key="item.id">
        <img v-lazy="item.images[0].url"/>
        <div class="video-tilte">{{item.title}}</div>
        <div class="video-bo"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png"/></div>
        <div class="video-flot">
          <div class="flot-left"> 
            <img :src="item.user.avatarurl"/>
            <span class="left-txt">{{item.user.nickName}}</span>
          </div>
          <div class="flot-right">
            <div class="right-zan">   
              <span>{{item.upCount}}</span>
            </div>
             <div class="right-pin">
              <span>{{item.commentCount}}</span>
            </div>
             <div class="right-fen">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Myhread2 from "../components/myhread2.vue";
import Myhread from "../components/myhread.vue";
import axios from "axios";
export default {
  name: "Video",
  components: {
    Myhread2,
    Myhread,
  },
   data(){
      return{
        video:[]
      }
    },
    mounted(){
      axios.get("/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=86B91630533D11EC8849DD729AB9E91ABAED98CE0B6E4278B4EAB3B99FA8E8FA&channelId=4&feedChannelId=0&timestamp=1639048974261&offset=15")
      .then((rel) =>{
        console.log(rel.data.data.feeds);
        this.video = rel.data.data.feeds;
        console.log(this.video);
      })
    }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.movie-con {
  margin-top: 4.266667rem;
  margin-bottom: 1.333333rem;
}

ul,
li {
  list-style: none;
}
.video-tlt {
  width: 100%;
  height: 50px;
  background: #fff;
  line-height: 50px;
}
.video-tlt ul {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  color: #222;
}
.video-tlt ul li:nth-of-type(1) {
  font-size: 18px;
  border-bottom: 2px solid #f03d37;
}
  .video-cont{
    width:100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.8666666666666667rem;
  }

  .cont-list{
    position: relative;
    width:100%;
    height:6.4rem;
    margin-bottom: 0.12rem;
    margin-bottom: 50px;
  }
  .cont-list img{
    width:10rem;
    height:6.346666666666667rem;
  }
  .video-tilte{
    position: absolute;
    top:10px;
    left:20px;
    font-size:16px;
    color:#fff;
  }
  .video-cont .video-bo{
    position: absolute;
    width: 1.5466666666666666remx;
    height:1.5466666666666666remx;
    top: 37%;
    left: 43%;
  }
  .video-cont .video-bo img{
    width: 1.5466666666666666rem;
    height: 1.5466666666666666rem;
  }

  .video-cont .video-flot{
    width:100%;
    height:1.3333333333333333rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
  }
  .flot-left{
    color:#666;
    height:1.3333333333333333rem;
    margin-left:10px;
    margin-top:10px;
  }
  .flot-left img{
    width:.5866666666666667rem;
    height:.5866666666666667rem;
    border-radius: 50%;
    vertical-align: center;
  }
  .left-txt{
    display: inline-block;
    height:.5333333333333333rem;
    font-size: 14px;
    margin-left: 0.16rem;
    vertical-align: top;
    line-height: .6666666666666666rem;
  }
  .flot-right{
   height: 100%;
   display: flex;
   align-items: center;
   
  }
  .flot-right .right-zan{
    background: url("//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-praise.png") no-repeat 0;
    background-size: 20px 20px;
    padding-left: 0.46rem;
    padding-right: 0.1rem;
    font-size: .24rem;
    height: 0.7rem;
    line-height: .7rem;
    margin-right: .4rem;
}

  .flot-right .right-zan span,.flot-right .right-pin span{
    padding-left:5px;
  }

  .right-pin{
    background: url("//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-comment.png") no-repeat 0;
    background-size: 20px 20px;
    padding-left: 0.46rem;
    padding-right: 0.1rem;
    font-size: .24rem;
    height: 0.7rem;
    line-height: .7rem;
    margin-right: 0.24rem;
  }
  .right-fen{
    background: url("//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-share.png") no-repeat 50%;
    background-size: 20px 20px;
    width: 0.36rem;
    height: 0.7rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    margin-right:10px;
  }
</style>